<template>
	<view class="morePage">
		<!-- 标题 -->
		<shopro-navbar
			back-icon-color="#020202"
			:background="{ background: '#fff' }"
			@backHandler="goBack"
			:backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
			:isBack="true">
			<view slot="content" class="u-flex nav-wrap">
				<view class="nav-item">
					{{ title }}
				</view>
			</view>
		</shopro-navbar>
		<shopro-search :input_text="search_val" :status_bar_height="statusBarHeight" @onSearchNameApi="onSearchName()"></shopro-search>
		<view class="moreContent" :style="{'margin-top':statusBarHeight-8+'px'}">
			<view v-for="(item,index) in list">
				<view class="moreList" :key="index"
				      @click="handleDetail(item)">
					<image class="imgs" :src="item.image" mode="aspectFill"></image>
					<view class="u-flex u-flex-col u-row-around u-m-l-20">
						<view class="cent-bo-b-l u-m-b-10 u-ellipsis-1" style="width: 63vw;display: flex;justify-content: flex-start">
							<view style="color:#626161">{{item.name}}</view>
							<view class="cent-bo-b-r u-m-l-20  u-ellipsis-1" style="color:#626161;font-weight: normal">{{item.job}}</view>
						</view>
						<view class="cent-bo-b-l u-m-b-10 u-ellipsis-1" style="width: 63vw;display: flex;justify-content: flex-start">
							<view style="color:#333;font-weight: bold">{{item.company_name}}</view>
						</view>
						<view class="u-ellipsis-2" style="width: 63vw;" v-html="item.address"></view>
					</view>
				</view>
			</view>
		</view>
		<shopro-empty v-if="list.length==0" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无客户~"></shopro-empty>
	
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
	components: {},
	data() {
		return {
			title: "我的客户",
			list: [],
			store_key: "search_list",
			search_val:"",
			statusBarHeight: systemInfo.statusBarHeight*2-8
		};
	},
	props: {},
	onLoad(options) {
	},
	computed: {},
	created() {},
	onShow() {
		this.list=[];
		this.getlist(this.title);
	},
	methods: {
		getlist(type) {
			this.$new_http("newuser.kehulist", {
				search:this.search_val
			}).then((res) => {
				console.log(res.data.data);
				this.list = res.data.data;
			});
		},
		onSearchName(val){
			this.search_val = val;
			this.list = [];
			this.getlist(this.title);
			
		},
		handleDetail(val) {
			console.log(val);
			// uni.navigateTo({
			// 	url: "/pages/finance/teacherDetail?val=" + val.id,
			// });
		},
	},
};
</script>

<style lang="scss">
.morePage {
	background: #f7f7f7;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	min-height: 100vh;
	.nav-wrap {
		width: 100%;
		text-align: center;
	}
	
	.nav-item {
		width: 100%;
		font-size: 32rpx;
	}
	
	.moreContent {
		
		.moreList {
			width: 100%;
			padding: 24rpx 10rpx 30rpx 16rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 20rpx;
			display: flex;
			
			.imgs {
				width: 170rpx;
				height: 170rpx;
				border-radius: 20rpx;
			}
			
			.moreRight {
				width: 431rpx;
				margin-left: 28rpx;
				
				.companyType {
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
				
				.name {
					font-family: PingFang;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}
				
				.hite {
					margin-top: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					line-height: 42rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
</style>
